<template>
    <div class="main">
        <h1>表单绑定</h1>
        <h2>Text Input</h2>
        <input type="text" v-model="test">{{ test }}
        <h2>Checkbox</h2>
        <input type="checkbox" id="checkbox" v-model="checked">
        <span>checked:{{ checked }}</span>
        <!--多个复选框可以绑定到相同的 v-model 数组-->
        <h2>Multi Checkbox</h2>
        <input type="checkbox" id="jave" value="jave" v-model="checkboxName.value">
        <label>java</label>
        <input type="checkbox" id="jav" value="jav" v-model="checkboxName.value">jav
        <input type="checkbox" id="ja" value="ja" v-model="checkboxName.value">ja
        <span>{{ checkboxName.value }}</span>
        <h2>Radio</h2>
        <input type="radio" value="one" v-model="picked"><span>one</span>
        <input type="radio" value="two" v-model="picked"> <span>two</span>
        <p>{{ picked }}</p>
        <h2>Select</h2>
        <select name="seec" id="wc" v-model="selected">
            <option value="A">A</option>
            <option value="b">b</option>
            <option value="c">c</option>
            <option value="d">d</option>
        </select>
        <p>{{ selected }}</p>
        <h2>Multi Select</h2>
        <select v-model="multiSelected" multiple style="width:100px">
            <option>A</option>
            <option>B</option>
            <option>C</option>
        </select>
        <span>Selected: {{ multiSelected }}</span>

    </div>

</template>
<script lang="ts" setup>
import { ref, reactive } from 'vue';
const test = ref('Edit me')
const checked = ref(true)
// reactive必须放入对象否则不好用
const checkboxName = reactive({ value: [] })
const picked = ref('one')
const selected = ref('A')
const multiSelected = ref([])
</script>
<style>
.main {
    width: 600px;
    height: 800px;
    margin: 40px auto 0;
    border: 1px solid black;
}
</style>